<template>
  <div class="container">
    <img
      class="tips_img"
      src="https://imgs.nexbie.com/uploads/3a1756ca4a4b43afa449fa52391ec417.webp"
      alt="" />
    <div class="tips_text mt-[16px]">The Post is No Longer Available</div>
    <div @click="goHome" v-hover-gradient class="btn mt-[40px] cursor-pointer">Return to Home</div>
  </div>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const goHome = () => {
    console.log('zz');
    router.push('/');
  };
</script>

<style scoped lang="scss">
  .container {
    background: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .btn {
      display: flex;
      width: 270px;
      height: 48px;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
      background: var(---, linear-gradient(90deg, #f76b1b 0%, #dc3a0e 100%));
      backdrop-filter: blur(2px);
      color: var(---0, #fff);
      font-family: 'InterTight';
      font-size: 18px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    .tips_img {
      width: 80px;
      height: 80px;
    }
    .tips_text {
      color: var(---6, #7a7a7a);
      text-align: center;
      font-family: 'InterTight';
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }
  }
</style>
